<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>垂直margin合并</title>
	<style type="text/css">
		.box{
			width: 600px;
			height: 300px;
			border: 1px solid #333;
			margin: 50px auto;
		}

		.box div{
			/*margin-left: 20px;
			margin-right: 20px;*/
			text-indent: 16px;

			/*margin发生了合并,否则上下段会有60px*/
			/*margin-top: 30px;
			margin-bottom: 30px;*/
			margin: 30px 20px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下
		</div>
	</div>
</body>
</html>